<ng-container *ngIf="fileUploaders.length > 0">
  <div *ngFor="let fileUploader of fileUploaders" class="devui-add-images">
    <div
      class="devui-add-items {{ fileUploader.status === 3 ? 'devui-upload-failed' : '' }} 
      {{ fileUploader.status === 2 ? 'devui-upload-success' : '' }}"
    >
      <span class="filename">{{ fileUploader.file.name }}</span>
      <div *ngIf="fileUploader.status === 1" class="devui-loading">
        <d-progress [percentage]="fileUploader.percentage" [height]="'5px'" [strokeColor]="'#029931'"></d-progress>
        <span (click)="deleteFile(fileUploader)" class="devui-cancel-upload">{{ CANCELUPLOAD }}</span>
      </div>
      <span *ngIf="fileUploader.status === 2 || fileUploader.status === 3" class="icon-file"></span>
    </div>
    <span class="customize-area-upload-icon {{ fileUploader.status === 3 ? 'devui-failed-icon' : '' }}" (click)="deleteFile(fileUploader)">
      <svg viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
          <path
            d="M12.5,5 C12.7761424,5 13,5.22385763 13,5.5 L13,13 C13,14.0543618 12.1841222,14.9181651 11.1492623,14.9945143 L11,15 L5,15 C3.9456382,15 3.08183488,14.1841222 3.00548574,13.1492623 L3,13 L3,5.5 C3,5.22385763 3.22385763,5 3.5,5 C3.77614237,5 4,5.22385763 4,5.5 L4,13 C4,13.5128358 4.38604019,13.9355072 4.88337887,13.9932723 L5,14 L11,14 C11.5128358,14 11.9355072,13.6139598 11.9932723,13.1166211 L12,13 L12,5.5 C12,5.22385763 12.2238576,5 12.5,5 Z M6.53333333,6 C6.79515721,6 7.0129156,6.17687516 7.05807395,6.41012437 L7.06666667,6.5 L7.06666667,11.5 C7.06666667,11.7761424 6.8278852,12 6.53333333,12 C6.27150945,12 6.05375107,11.8231248 6.00859271,11.5898756 L6,11.5 L6,6.5 C6,6.22385763 6.23878147,6 6.53333333,6 Z M9.53333333,6 C9.79515721,6 10.0129156,6.17687516 10.058074,6.41012437 L10.0666667,6.5 L10.0666667,11.5 C10.0666667,11.7761424 9.8278852,12 9.53333333,12 C9.27150945,12 9.05375107,11.8231248 9.00859271,11.5898756 L9,11.5 L9,6.5 C9,6.22385763 9.23878147,6 9.53333333,6 Z M10,1 C10.5128358,1 10.9355072,1.38604019 10.9932723,1.88337887 L11,2 L11,3 L14.5,3 C14.7761424,3 15,3.22385763 15,3.5 C15,3.77614237 14.7761424,4 14.5,4 L1.5,4 C1.22385763,4 1,3.77614237 1,3.5 C1,3.22385763 1.22385763,3 1.5,3 L5,3 L5,2 C5,1.48716416 5.38604019,1.06449284 5.88337887,1.00672773 L6,1 L10,1 Z M10,2 L6,2 L6,3 L10,3 L10,2 Z"
          ></path>
        </g>
      </svg>
    </span>
    <span *ngIf="fileUploader.status === 3" class="customize-area-upload-icon" (click)="dUpload.uploadFiles()">
      <svg viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
          <g transform="translate(1.500000, 1.500116)" fill-rule="nonzero">
            <path
              d="M12.4869832,0.665233288 C12.738719,0.665233288 12.9480871,0.84663079 12.9915055,1.08584371 L12.9997672,1.17801728 L12.9997672,6.49988358 C12.9997672,6.78308636 12.770186,7.01266758 12.4869832,7.01266758 C12.2352474,7.01266758 12.0258792,6.83127007 11.9824608,6.59205716 L11.9741992,6.49988358 L11.9741992,1.17801728 C11.9741992,0.894814502 12.2037804,0.665233288 12.4869832,0.665233288 Z"
            ></path>
            <path
              d="M0.512783993,5.98709959 C0.764519796,5.98709959 0.973887943,6.16849709 1.01730635,6.40771001 L1.02556799,6.49988358 L1.02556799,11.8217499 C1.02556799,12.1049527 0.795986772,12.3345339 0.512783993,12.3345339 C0.261048189,12.3345339 0.0516800421,12.1531364 0.00826163665,11.9139235 L0,11.8217499 L0,6.49988358 C0,6.21668081 0.229581214,5.98709959 0.512783993,5.98709959 Z"
            ></path>
            <path
              d="M0.512783993,5.98709959 C0.795986772,5.98709959 1.02556799,6.21668081 1.02556799,6.49988358 C1.02556799,9.52325612 3.47651104,11.9741992 6.49988358,11.9741992 C7.93807764,11.9741992 9.28736963,11.4178774 10.3014531,10.4389664 C10.5052101,10.2422766 10.8298364,10.2480056 11.0265263,10.4517626 C11.2232162,10.6555196 11.2174871,10.9801459 11.0137301,11.1768358 C9.81032798,12.3384991 8.2065012,12.9997672 6.49988358,12.9997672 C2.91010549,12.9997672 -1.90070182e-13,10.0896617 -1.90070182e-13,6.49988358 C-1.90070182e-13,6.21668081 0.229581214,5.98709959 0.512783993,5.98709959 Z M6.50011642,5.5067062e-14 C10.0898945,5.5067062e-14 13,2.91010549 13,6.49988358 C13,6.78308636 12.7704188,7.01266758 12.487216,7.01266758 C12.2040132,7.01266758 11.974432,6.78308636 11.974432,6.49988358 C11.974432,3.47651104 9.52348896,1.02556799 6.50011642,1.02556799 C4.99407431,1.02556799 3.58651884,1.63600716 2.56102949,2.69831827 C2.36433729,2.90207301 2.0397109,2.90779832 1.83595617,2.71110612 C1.63220143,2.51441392 1.62647612,2.18978753 1.82316832,1.9860328 C3.0399838,0.725525707 4.7129067,5.5067062e-14 6.50011642,5.5067062e-14 Z"
            ></path>
          </g>
        </g>
      </svg>
    </span>
  </div>
</ng-container>
<div
  dUpload
  #dUpload="dUpload"
  class="devui-add-images devui-upload {{ isDropOver ? 'devui-upload-dropover' : '' }}"
  [enableDrop]="true"
  [fileOptions]="fileOptions"
  [uploadOptions]="uploadOptions"
  [uploadedFiles]="uploadedFiles"
  [fileUploaders]="fileUploaders"
  (successEvent)="onSuccess($event)"
  (errorEvent)="onError($event)"
  (alertMsgEvent)="alertMsg($event)"
  (fileDrop)="fileDrop($event)"
  (fileOver)="fileOver($event)"
  (fileSelect)="fileSelect($event)"
  [dynamicUploadOptionsFn]="dynamicUploadOptionsFn"
>
  <span class="icon-op-add"></span>
</div>
<d-toast [value]="message"></d-toast>
